<template>
    <section>
        <el-card>
            <el-table border :data="subjectArr" :fit="true">
                <el-table-column label="#" align="center" type="index"></el-table-column>
                <el-table-column label="课题ID" align="center" prop="id"></el-table-column>
                <el-table-column label="课题名字" align="center" prop="title"></el-table-column>
                <el-table-column label="负责人" align="center" prop="chairman">
                    <template #default="{ row }">
                        <div class="user_id" @click="showUserCard(row.chairman.id)">
                            {{ row.chairman.id }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="简介" align="center" prop="remark">
                    <template #default="{ row }">
                        <div>
                            {{ omitStr(row.remark, 40) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="相关词条" align="center" prop="tagArr">
                    <template #default="{ row }">
                        <div class="tag_container">
                            <el-tag type="primary" v-for="tag in row.tagArr" :key="tag.id">
                                {{ tag.name }}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime">
                    <template #default="{ row }">
                        <div>{{ new Date(row.createTime).toLocaleString() }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="进度" align="center" prop="status">
                    <template #default="{ row }">
                        <div>{{ transformStatus(row.status) }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <div class="operate_view" @click="goDetail(row.id)">查看</div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="pageNo"
                :page-sizes="[5, 7, 9, 11]"
                v-model:page-size="limit"
                layout="prev,pager,next,jumper,->,sizes,total"
                :total="total"
                background
                @current-change="getList"
                @size-change="handler"
            ></el-pagination>
        </el-card>
        <user-drawer v-model:visible="visible" :userId="curUserId" />
    </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { omitStr } from "@/utils/tools/omitStr.ts";
import { SubjectStatus, SubjectStatusText } from "@/constants/subjectStatus";
// 引入接口
import { reqSubjectAboutMeList } from "@/api/subject";
import router from "@/router";
import { isEmpty } from "@/utils/tools/isEmpty";

// 定义分页数据
const limit = ref<number>(10);
const pageNo = ref<number>(5);
const total = ref<number>(0);

// 存储全部课题的数组
// eslint-disable-next-line no-undef
let subjectArr = ref<Subject[]>([]);
// 获取课题列表
const getList = async (pager: number = 1) => {
    pageNo.value = pager;
    const result = await reqSubjectAboutMeList({
        limit: limit.value,
        pageNo: pageNo.value,
    });
    if (result.code == 200 && typeof result.data == "object") {
        total.value = result.data.total;
        subjectArr.value = result.data.list;
    } else {
        ElMessage.error(result.data as string);
    }
};
// 每页条目改变的时候进行的操作
const handler = () => {
    getList();
};

// 改变状态内容
const transformStatus = (status: number) => {
    return (SubjectStatusText as { [key: string]: string | number })[SubjectStatus[status]];
};

// 用户卡片的显示
const visible = ref<boolean>(false);
const curUserId = ref<number>(0);
// 点击负责人id的回调
const showUserCard = (userId: number) => {
    curUserId.value = userId;
    visible.value = true;
};
// 点击查看回调
const goDetail = (subjectId: number) => {
    if (isEmpty(subjectId)) return;
    router.push({
        name: "Subjecthome",
        params: { subjectId },
    });
    return;
};
onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.el-card {
    // 设置其下边距，控制布局
    &:not(:last-of-type) {
        margin-bottom: 10px;
    }

    &.search_card {
        :deep(.search_box) {
            // 设置表单为弹性布局，让搜索框和按钮左右对称分布
            display: flex;
            justify-content: space-between;
            // 设置垂直居中
            align-items: center;

            // 单独给该表单的表单项设置一下样式
            .el-form-item {
                // 清除其右外边距和下外边距
                margin-right: 0;
                margin-bottom: 0;
            }
        }
    }

    .el-table {
        // 设置其外边距
        margin-top: 10px;
        margin-bottom: 10px;

        .user_id,
        .operate_view {
            color: var(--el-color-primary);
            cursor: pointer;
        }

        .tag_container {
            .el-tag:not(:nth-child(1)) {
                margin-left: 5px;
            }

            .el-tag {
                cursor: pointer;
            }
        }
    }
}
</style>
